<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: fks
  Date: 2024/7/2
  Time: 11:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>书库管理</title>
    <link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/4.7.0/css/font-awesome.css">
</head>
<style>
    form.sea input[type=text] {
        padding: 10px;
        padding-bottom: 7px;
        font-size: 17px;
        border: 1px solid grey;
        float: left;
        width: 80%;
        background: #f1f1f1;
    }

    form.sea button {
        float: left;
        width: 60px;
        padding: 10px;
        background: #2196F3;
        color: white;
        font-size: 17px;
        border: 1px solid grey;
        border-left: none;
        cursor: pointer;
    }
    form.sea button:hover {
        background: #0b7dda;
    }

    body{
        background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
    }
    table {
        width: 80%; /* 设置表格宽度为页面宽度的80% */
        margin: auto; /* 使表格居中显示 */
        border-collapse: collapse; /* 合并边框 */
    }
    th, td {
        border: none; /* 设置单元格边框 */
        padding: 8px; /* 设置单元格内边距 */
        text-align: left; /* 设置文本左对齐 */
        border-bottom: 1px solid;
    }
    th {
        background-color: #f2f2f2; /* 设置表头背景颜色 */
    }
    .product-name {
        width: 40%; /* 设置商品名称列宽度为60% */
    }

    .sea{
        margin-left: 10%;
    }
    .show {
        margin-top: 150px;
    }
    .container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 1000px;
        background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
    }

    body{
        margin: 0;
    }

    .mainContent {
        display: flex;
        flex-direction: row;
        height: 90%;
        width: 100%;
    }

    .mainDivleft {
        width: 15%;
        height: 100%;
    }

    .mainDivright {
        width: 85%;
        height: 100%;
    }
    #inputs{
        width: 300px;

    }
    a{
        text-decoration: none;
    }
</style>
<body>
<div class="container">

    <div class="mainContent">
        <div class="mainDivleft">
            <p style="font-size: 45px;margin-left: 10px">导航栏</p>
            <ul>
                <li class="link"><a href="/getOrder" style="font-size: 30px">订单查询</a></li>
                <li class="link"><a href="/getbooks" style="font-size: 30px">书库管理</a></li>
                <li class="link"><a href="/toutiao.jsp" style="font-size: 30px">头条管理</a></li>
            </ul>
        </div>
        <div class="mainDivright">

            <div class="mainRight">
                <form action="findbooks" method="get" class="sea">
                    <input type="text" name="query" placeholder="请输入书名" id="inputs">
                    <button type="submit"><i class="fa fa-search"></i></button>
                </form>
                <form action="addbook" method="get">
                <table border="1">

                    <tr>
                        <th class="product-name">书名</th>
                        <th>作者</th>
                        <th>单价</th>
                        <th>剩余数量</th>
                       <th ><git colspan="2">操作</git ><th>
                    </tr>

                    <tr>
                        <td ><input type="text"  name="bookname"></td>
                        <td ><input type="text"  name="author"></td>
                        <td><input type="text" name="price"></td>
                        <td><input type="text" name="number"></td>
                        <td><input type="submit" value="提交"></td>
                        <td><input type="reset" value="重置"></td>
                    </tr>

                </table>
                </form>

                <table border="1" class="show">
                    <tr>
                        <th>编号</th>
                        <th class="product-name">书名</th>
                        <th>作者</th>
                        <th>单价</th>
                        <th>剩余数量</th>
                        <th >操作</th>
                    </tr>
                    <c:forEach items="${requestScope.books}" var="book">
                    <tr>
                        <td>${book.bookid}</td>
                        <td >${book.title}</td>
                        <td >${book.author}</td>
                        <td>${book.price}</td>
                        <td>${book.stock}</td>
                        <td><button><a href="/deletebook?id=${book.bookid}">删除</a></button></td>
                    </c:forEach>

                </table>
        </div>
    </div>
</div>

</body>
</html>
